<template>
  <div id="nav">
    <div class="w640">
      <dl  :class="{ active: isActive('/') }">
        <RouterLink to="/">
          <dt><i class="iconfont icon-home_line"></i></dt>
          <dd>首页</dd>
        </RouterLink>
      </dl>
      <dl :class="{ active: isActive('/cart') }">
        <RouterLink to="/cart">
          <dt><i class="iconfont icon-cart"></i></dt>
          <dd>购物车</dd>
        </RouterLink>
      </dl>
      <dl :class="{ active: isActive('/order') }">
        <RouterLink to="/order">
          <dt><i class="iconfont icon-means"></i></dt>
          <dd>订单</dd>
        </RouterLink>
      </dl>
      <dl :class="{ active: isActive('/user') }">
        <RouterLink to="/user">
          <dt><i class="iconfont icon-live_me"></i></dt>
          <dd>我的</dd>
        </RouterLink>
      </dl>
    </div>
  </div>
</template>

<script lang="ts" setup>
 import { useRoute } from 'vue-router';
const $route = useRoute();
const isActive =(path:string)=>{
  return $route.path === path

}
</script>

<style scoped>
</style>